<template>
	<view class="centem-body">

		<!-- 全屏加载 -->
		<wall-bulr-bg v-if="coverBulr"></wall-bulr-bg>

		<!-- 密码访问 -->
		<block v-if="protected">
			<common-pass @passTap="emitPass" :isError="isError" :getPass="getPass" :public_name="wxSet.public_name"
				:public_key="wallInfo.public_key" :public_step="public_step"
				style="margin-top: 280rpx;display: block;"></common-pass>
		</block>

		<block v-else>
			<!-- 滚动案例区 -->
			<swiper class="swiper-wall" easing-function="easeInOutCubic" :current="swiperIndex"
				@change="handleSwiperChange" :next-margin="imgUrls.length > 1 ? '30px' : '0px'"
				:previous-margin="imgUrls.length > 1 ? '30px' : '0px'">
				<block v-for="(item, index) in imgUrls" :key="index" v-if="imgUrls != ''">
					<swiper-item class="swiper-wall-item">
						<view class="swiper-wall-list-img">
							<!-- 图片 -->
							<image :src="item" class="fengrui-img-wall" mode="widthFix" />
						</view>
					</swiper-item>
				</block>

				<block v-for="(item, index) in videoUrls" :key="index" v-if="videoUrls != ''">
					<swiper-item class="swiper-wall-item">
						<view class="swiper-wall-list-img">
							<!-- 视频 -->
							<video :src="item" class="wall-video-cover" :style="{ 'height': heightVideo[swiperIndex] }"
								:how-fullscreen-btn="show_fullscreen" :show-play-btn="show_play" :controls="controls"
								object-fit="cover" autoplay="false" loop="true" :muted="muted"
								@loadedmetadata="videoInfo" :current="swiperIndex" :id="'video' + index"
								show-center-play-btn="false"></video>
						</view>
					</swiper-item>
				</block>
			</swiper>

			<!-- 视频音乐按钮 -->
			<view @tap="videoMusic()" v-if="videoUrls != ''"
				:class="muted ? 'video-music video-music-hui' : 'video-music video-music-rouad'">
				<image class="fengrui-img" src="../../static/data/video-music.png" mode="aspectFill" />
			</view>

			<!-- 下载组建 -->
			<view class="wall-flex">
				<view class="wall-list-view">
					<button class="wall-list-btn" open-type="share">
						<view class="wall-list-icon" style="height: 58rpx;">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="wall-list-font">分享</view>
					</button>

					<view v-if="wallInfo.fr_down_url !== ''" @tap="handlePhotoSave('zip')">
						<view class="wall-list-icon">
							<image class="fengrui-img"
								:src="isShow ? '/static/data/ad_video.svg' : '../../static/data/Appendixes.svg'" mode="">
							</image>
						</view>
						<view class="wall-list-font">
							{{ isShow ? '广告下载合计' : '合集下载' }}
						</view>
					</view>

					<view @tap="handlePhotoSave('video')" v-if="wallInfo.pos_read == '6'">
						<view class="wall-list-icon">
							<image class="fengrui-img"
								:src="isShow ? '/static/data/ad_video.svg' : '../../static/data/down.svg'" mode="">
							</image>
						</view>
						<view class="wall-list-font">
							{{ isShow ? '广告获取' : '免费获取' }}
						</view>
					</view>
					<view @tap="handlePhotoSave('img')" v-if="wallInfo.pos_read == '5'">
						<view class="wall-list-icon">
							<image class="fengrui-img"
								:src="isShow ? '/static/data/ad_video.svg' : '../../static/data/down.svg'" mode="">
							</image>
						</view>
						<view class="wall-list-font">
							{{ isShow ? '广告下载' : '免费保存' }}
						</view>
					</view>

					<view class="fr-btn" @tap="showSubscribeMessage()" v-if="wxSet.if_subscribe == 1">
						<i class="animation"></i>订阅最新内容<i class="animation"></i>
					</view>
				</view>
			</view>
		</block>

		<!-- 弹窗 -->
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="wall-popup">
				<view class="privacy-title">打包保存</view>
				<view v-for="(item, index) in wallInfo.fr_down_url" :key="index">
					<view class="privac-text">
						<text user-select="true" style="word-break: break-all;">
							{{ item }}
						</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
// 获取应用实例
const app = getApp()
import * as API from "../../utils/api";
// 导入订阅消息工具类
import SubscribeMessage from '@/utils/subscribeMessage';
export default {
	data() {
		return {
			posdCenterID: 0,
			posUrl: '',

			// 文章详情
			wallInfo: {},
			imgUrls: [],
			videoUrls: [],
			title: '加载中Ing...',

			indicatorDots: true,

			isShow: false,
			swiperIndex: 0,

			// 基本配置
			wxSet: {},
			launchScene: 0, //微信小程序场景值
			// 随机数码
			code64: '',
			typeImg: '',
			// 全屏加载
			coverBulr: true,

			// 密码访问
			protected: false,
			isError: 'suss',
			getPass: '',
			public_step: false,

			// 日期总和
			postDaySum: 0,

			// 激励视频广告
			videoAd: null,

			// 广告次数相关
			adWatchedCount: 0, // 已观看广告次数
			requiredAdCount: 1, // 需要观看的广告次数，默认为1

			// 视频壁纸
			show_fullscreen: false,
			show_play: false,
			controls: false,
			heightVideo: [],
			videoLogin: true,
			muted: true,

			// 消息订阅
			templateId: '',
			openID: '',
			statusMessage: '',
		}
	},
	computed: {
		// 分享路径
		sharePath() {
			return '/pages/wall/wall?id=' + this.posdCenterID;
		},

		// 计算剩余需要观看的广告次数
		remainingAdCount() {
			return Math.max(0, this.requiredAdCount - this.adWatchedCount);
		}
	},
	// 分享好友配置
	onShareAppMessage() {
		return {
			title: this.title,
			imageUrl: this.wallInfo.thumbnailurl,
			path: this.sharePath
		}
	},
	// 文章分享朋友圈 目前支持安卓
	onShareTimeline() {
		return {
			title: this.title,
			imageUrl: this.wallInfo.thumbnailurl,
			path: this.sharePath
		}
	},
	onLoad(posID) {
		// 获取当前日期总和
		this.postDaySum = this.getCurrentDateSum();

		// 接收数据
		this.posdCenterID = posID.id;
		this.posUrl = this.sharePath;

		if (!app.globalData.wxSet) {
			// 解决异步
			app.on('wxSet', this.initData);
		} else {
			this.initData();
		}

		// 微信分享朋友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		// 获取当前日期总和
		getCurrentDateSum() {
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 月份从 0 开始，需加 1
			const day = now.getDate();
			return year + month + day;
		},
		// 初始化数据
		initData() {
			this.wxSet = app.globalData.wxSet;
			this.launchScene = app.globalData.launchScene; //微信小程序场景值
			// 获取文章数据
			this.fetchWallData();
		},
		// 获取文章数据
		fetchWallData() {
			API.getInfo([this.posdCenterID]).then((res) => {
				// 正则提取图片
				this.imgUrls = this.extractImages(res.data.content.rendered);
				this.videoUrls = this.extractVideo(res.data.content.rendered);
				this.wallInfo = res.data;
				this.title = res.data.title.rendered;
				this.protected = res.data.content.protected; //密码访问
				this.coverBulr = false;
				// 判断音
				const videoMusic = uni.getStorageSync('videoMusic');
				if (videoMusic === "" || videoMusic === false) {
					this.muted = false;
				} else {
					this.muted = true;
				}

				// 设置广告观看次数要求
				if (res.data.ad_number && parseInt(res.data.ad_number) > 0) {
					this.requiredAdCount = parseInt(res.data.ad_number);
				}

				if (this.wxSet.public_step) {
					this.public_step = true;
				}
				if (!this.protected) {
					this.checkAdCache();
				}
				this.checkPasswordCache();
			}).catch(err => {
				console.error('获取数据失败:', err);
				uni.showToast({
					title: '获取数据失败',
					icon: 'none'
				});
			});
		},
		// 从HTML内容中提取图片URL
		extractImages(html) {
			const imgRegex = /<img.*?src="([^"]*)".*?>/g;
			const imgUrls = [];
			let match;
			while ((match = imgRegex.exec(html)) !== null) {
				imgUrls.push(match[1]);
			}
			return imgUrls;
		},
		// 从HTML内容中提取视频URL
		extractVideo(html) {
			const videoRegex = /<video.*?src="([^"]*)".*?>/g;
			const videoUrls = [];
			let match;
			while ((match = videoRegex.exec(html)) !== null) {
				videoUrls.push(match[1]);
			}
			return videoUrls;
		},
		// 密码访问
		emitPass(pass) {
			API.getInfoPass(this.posdCenterID, pass).then((res) => {
				if (res.statusCode !== 200) {
					this.isError = 'err';
				} else {
					this.savePasswordToCache(pass);
					this.imgUrls = this.extractImages(res.data.content.rendered);
					this.videoUrls = this.extractVideo(res.data.content.rendered);
					this.wallInfo = res.data;
					this.title = res.data.title.rendered;
					this.protected = false;

					// 设置广告观看次数要求
					if (res.data.ad_number && parseInt(res.data.ad_number) > 0) {
						this.requiredAdCount = parseInt(res.data.ad_number);
					}

					this.checkAdCache();
				}
			}).catch(err => {
				console.error('密码验证失败:', err);
				this.isError = 'err';
			});
		},
		// 检查广告缓存
		checkAdCache() {

			// 获取激励视频缓存
			const postAdKey = uni.getStorageSync('post_adkey');

			setTimeout(() => {
				// 广告缓存功能未开启
				if (this.wxSet.ad_time !== '1') {
					this.initAd();
					return;
				}

				// 没有缓存记录
				if (!postAdKey) {
					this.initAd();
					return;
				}

				const foundItem = postAdKey.find(item => item.id === this.posdCenterID);

				// 缓存中没有当前ID或缓存已过期
				if (!foundItem || foundItem.time !== this.postDaySum) {
					this.initAd();
					return;
				}

				// 如果有缓存，则设置已观看次数为所需次数，跳过广告
				this.adWatchedCount = this.requiredAdCount;
				this.isShow = false;

				// 检查公告消息
				if (this.wallInfo.wallInfo_notice) {
					uni.showModal({
						title: '公告',
						content: this.wallInfo.wallInfo_notice
					});
				}
			}, 1000);
		},

		// 检查密码缓存
		checkPasswordCache() {
			const passKey = uni.getStorageSync('pass_adkey');
			if (passKey) {
				const foundItem = passKey.find(item => item.id === this.posdCenterID);
				if (foundItem && foundItem.time == this.postDaySum) {
					this.getPass = foundItem.pass;
				}
			}
		},

		// 初始化广告
		initAd() {
			if (this.wxSet.if_subscribe == 1) { // 判断是否开启订阅消息
				API.getSubscribeTemplate().then((res) => {
					this.templateId = res.data.template_id;
					if(this.wxSet.if_subscribe_popup == 1){
						setTimeout(() => {
							this.showSubscribeMessage();
						}, 1500);
					}
				})
			}
			
			if (this.wxSet.wx_jili_video && this.wallInfo.fr_videp_if === '1') {
				this.createVideoAd();
				this.isShow = true;
			}
		},

		// 创建激励视频广告组件
		createVideoAd() {
			if (!this.wxSet.wx_jili_video || !wx.createRewardedVideoAd) return;

			this.videoAd = uni.createRewardedVideoAd({
				adUnitId: this.wxSet.wx_jili_video
			});

			this.videoAd.onLoad(() => { });

			this.videoAd.onError((err) => {
				console.error('广告加载失败:', err);
				// 广告错误时，跳过广告要求
				this.adWatchedCount = this.requiredAdCount;
				this.downloadWallpaper();
				wx.showToast({
					icon: 'none',
					title: "错误码：" + err.errCode
				});
				this.isShow = false;
				if (this.wxSet.if_subscribe_popup == 1  && this.wxSet.if_subscribe == 1) {
					setTimeout(() => {
						this.showSubscribeMessage();
					}, 1500);
				}
			});

			this.videoAd.onClose((res) => {
				if (res && res.isEnded) {
					// 增加已观看次数
					this.adWatchedCount++;

					uni.showToast({
						icon: 'none',
						title: this.remainingAdCount > 0 ?
							`还需观看${this.remainingAdCount}次广告` : "感谢您的支持"
					});

					// 如果已观看次数达到要求
					if (this.adWatchedCount >= this.requiredAdCount) {
						this.isShow = false;
						this.downloadWallpaper();
						if (this.wxSet.if_subscribe_popup == 1  && this.wxSet.if_subscribe == 1) {
							setTimeout(() => {
								this.showSubscribeMessage();
							}, 1500);
						}
						// 设置广告缓存
						if (this.wxSet.ad_time === '1') {
							this.saveAdToCache();
						}
					} else {
						// 如果次数不够，继续显示广告
						setTimeout(() => {
							this.showVideoAd();
						}, 1500);
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: "中途关闭广告，不计次数"
					});
				}
			});
		},

		// 处理轮播图变化
		handleSwiperChange(e) {
			this.swiperIndex = e.detail.current;
		},

		// 处理照片保存
		handlePhotoSave(type) {
			if (this.launchScene === 1154) {
				uni.showToast({
					title: '请前往小程序使用完整服务',
					icon: "none"
				});
				return;
			}

			this.typeImg = type;
			if (this.isShow && this.adWatchedCount < this.requiredAdCount) {
				this.showAdDownloadConfirm();
			} else {
				this.downloadWallpaper();
			}
		},

		// 显示广告下载确认
		showAdDownloadConfirm() {
			uni.showModal({
				title: '提示',
				content: `需要观看${this.requiredAdCount}次广告才能保存壁纸，当前已观看${this.adWatchedCount}次`,
				success: (res) => {
					if (res.confirm) {
						this.showVideoAd();
					}
				}
			});
		},

		// 显示激励视频
		showVideoAd() {
			// 判断设备信息
			wx.getSystemInfo({
				success: (res) => {
					if (res.model.includes === 'ipad') {
						wx.showToast({
							icon: 'error',
							title: "请使用移动端设备访问"
						});
					} else if (this.videoAd) {
						this.videoAd.show().catch(() => {
							// 失败重试
							this.videoAd.load()
								.then(() => this.videoAd.show())
								.catch(err => {
									console.error('激励视频广告显示失败', err);
								});
						});
					}
				}
			});
		},

		// 下载壁纸
		downloadWallpaper() {
			if (this.wallInfo.pos_read === '5') {
				if (this.typeImg != 'zip') {
					this.downloadSingleImage();
				} else {
					this.openPopup(); // 打开弹窗
				}
			} else {
				uni.navigateTo({
					url: '../weblist/weblist?url=' + encodeURIComponent(JSON.stringify(this.wallInfo.redbag)) +
						'&type=json'
				});
			}
		},
		// 打开弹窗
		openPopup() {
			this.$refs.popup.open()
		},

		// 下载单张图片
		downloadSingleImage() {
			if (this.imgUrls.length > 0) { //判断图片是否是视频
				var urlDa = this.imgUrls[this.swiperIndex];
			} else {
				var urlDa = this.videoUrls[this.swiperIndex];
			}

			uni.showLoading({
				title: '下载中...'
			});

			uni.downloadFile({
				url: urlDa,
				success: (res) => {
					console.log(res)
					uni.hideLoading();
					if (res.statusCode === 200) {
						if (this.typeImg == 'img') { //判断图片是否是视频
							this.saveImageToAlbum(res.tempFilePath);
						} else {
							this.saveVideoToAlbum(res.tempFilePath);
						}
					} else {
						this.showDownloadError();
					}
				},
				fail: () => {
					uni.hideLoading();
					this.showDownloadError();
				}
			});
		},

		// 显示下载错误提示
		showDownloadError() {
			uni.showToast({
				title: '图片下载失败',
				icon: 'none'
			});
		},

		// 保存图片到相册
		saveImageToAlbum(tempFilePath) {
			uni.saveImageToPhotosAlbum({
				filePath: tempFilePath,
				success: () => {
					uni.showToast({
						title: '图片保存成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('图片保存失败:', err);
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					});
				}
			});
		},

		// 保存视频到相册
		saveVideoToAlbum(tempFilePath) {
			uni.saveVideoToPhotosAlbum({
				filePath: tempFilePath,
				success: () => {
					uni.showToast({
						title: '视频保存成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('视频保存失败:', err);
					uni.showToast({
						title: '视频保存失败',
						icon: 'none'
					});
				}
			});
		},

		// 保存密码到缓存
		savePasswordToCache(pass) {
			let passKey = uni.getStorageSync('pass_adkey') || [];
			const isItem = passKey.find(item => item.id === this.posdCenterID);

			if (isItem) {
				passKey = passKey.map(item => {
					if (item.id === this.posdCenterID) {
						return {
							...item,
							time: this.postDaySum
						};
					}
					return item;
				});
			} else {
				passKey.unshift({
					id: this.posdCenterID,
					time: this.postDaySum,
					pass: pass
				});
			}

			uni.setStorageSync('pass_adkey', passKey);
		},

		// 获取视频信息
		videoInfo(e) {
			// 计算视频比例
			var proportion = e.detail.height / (e.detail.width);
			var heights = (proportion * app.globalData.windowHeight) * 0.8 + 'rpx';

			this.heightVideo = this.heightVideo.concat(heights);
			this.videoLogin = false;

			// 初始化第一个视频播放
			this.playVideo(0);
			// console.log(this.data.heightVideo, '计算视频高度')
		},

		// 滑动到某视频自动播放
		playVideo(index) {
			this.pauseAllVideos();
			// uni-app使用uni.createVideoContext获取视频上下文
			const videoContext = uni.createVideoContext(`video${index}`, this);
			videoContext.play();
		},

		// 初始化遍历视频数组暂停所有视频
		pauseAllVideos() {
			// 根据实际数据结构遍历videoUrls数组（原代码中视频数据存储在videoUrls）
			this.videoUrls.forEach((_, index) => {
				const videoContext = uni.createVideoContext(`video${index}`, this);
				videoContext.pause();
			});
		},
		videoMusic() {
			this.muted = !this.muted;
			uni.setStorageSync("videoMusic", this.muted); // 存为缓存
		},

		// 处理返回按钮
		handleBack() {
			const pages = getCurrentPages();
			if (pages.length === 1) {
				uni.switchTab({
					url: '../index/index'
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},

		// 保存广告查看记录到缓存
		saveAdToCache() {
			let postAdKey = uni.getStorageSync('post_adkey') || [];
			const isItem = postAdKey.find(item => item.id === this.posdCenterID);

			if (isItem) {
				postAdKey = postAdKey.map(item => {
					if (item.id === this.posdCenterID) {
						return {
							...item,
							time: this.postDaySum
						};
					}
					return item;
				});
			} else {
				postAdKey.unshift({
					id: this.posdCenterID,
					time: this.postDaySum
				});
			}

			uni.setStorageSync('post_adkey', postAdKey);
		},

		// 弹窗订阅
		showSubscribeMessage() {
			SubscribeMessage.showSubscribeMessage(this.templateId, () => {
				// 订阅成功后的回调处理
				this.statusMessage = '订阅成功！';
			});
		},
	},
}
</script>

<style>
/* 下载组件 */
.wall-flex {
	width: calc(100% - 112rpx);
	position: fixed;
	bottom: 60rpx;
	left: 28rpx;
	padding: 0 28rpx;
	border-radius: 40rpx;
	background-color: #262d33;
}

.wall-list-view {
	margin: 20rpx 0;
	height: 110rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wall-list-icon {
	height: 64rpx;
	width: 64rpx;
	display: block;
	margin: auto;
	transition: all 0.3s ease;
}

.wall-list-btn {
	margin: 0rpx;
	padding: 0rpx;
	background-color: unset;
	line-height: unset;
}

.wall-list-font {
	color: #999;
	font-size: 22rpx;
	text-align: center;
	margin-top: 6rpx;
}

.wall-popup {
	background-color: #fff;
	overflow: hidden;
	border-radius: 20rpx 20rpx 0 0;
	padding: 28rpx 28rpx 54rpx 28rpx;
}

button:after {
	border: 0px solid rgba(0, 0, 0, .2);
}


/* 适配音乐按钮 */
.video-music {
	position: fixed;
	right: 30rpx;
	bottom: 300rpx;
	height: 70rpx;
	width: 70rpx;
	box-shadow: red 0rpx 2rpx 10rpx;
	border-radius: 200px;
	z-index: 99999;
}

.video-music-hui {
	filter: grayscale(100%)
}

.video-music-rouad {
	animation: rotation 1s linear infinite;
	transform-origin: center center;
	/* 设置旋转中心点为元素中心点 */
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 弹窗 */
.privac-x {
	height: 80rpx;
	width: 80rpx;
	position: absolute;
	right: 4%;
	top: 5%;
	z-index: 999;
}

.privacy-bg {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 9999999;
}

.privacy-view {
	position: absolute;
	animation: mymove 0.6s infinite;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 85%;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 40rpx;
}

.privacy-title {
	margin: 40rpx auto;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
}


.privac-text {
	background-color: #F2F2F2;
	color: #ADADAD;
	padding: 30rpx;
	font-size: 26rpx;
	margin: 28rpx;
	border-radius: 40rpx;
	text-align: justify;
}

.privacy-link {
	color: #07c160;
	line-height: 40rpx;
}

.privac-btn {
	background-color: black;
	color: #ffffff;
	width: 80%;
	text-align: center;
	border-radius: 100rpx;
	margin: 30rpx 10%;
	padding: 15rpx;
}

.privac-no {
	text-align: center;
	margin-top: 30rpx;
	color: #666;
	font-size: 26rpx;
}

@keyframes mymove {
	from {
		bottom: -20%;
	}

	to {
		bottom: 4%;
	}
}

/* .案例区 */
.swiper-h {
	margin-top: 50rpx;
	padding: 36rpx;
}

.swiper-title {
	font-size: 60rpx;
	font-weight: bold;
}

.swiper-desrc {
	margin: 40rpx auto;
	font-size: 26rpx;
}

.swiper-wall {
	height: 80%;
	width: 100%;
	top: 2%;
	left: 0;
	position: absolute;
	z-index: 2;
}


.swiper-wall-list-img {
	height: 100%;
	width: 100%;
	overflow: hidden;
	margin: auto;
	position: relative;
	border-radius: 60rpx;
}

.swiper-wall-item {
	height: 100%;
	width: 90% !important;
	padding: 0 5%;
}

.wallwall-fixed {
	position: fixed;
	bottom: 40rpx;
	width: 100%;
	overflow: hidden;
}

.wallwall-title {
	margin: 36rpx;
	text-align: center;
	font-weight: bold;
}

.wallwall-title-desrc {
	margin: 0 36rpx;
	color: #ADADAD;
	font-size: 26rpx;
}

.wallwall-flex {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 40rpx;
}

.fengrui-img-wall {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 60rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-wall-item-active .fengrui-img-wall {
	transform: translate(-50%, -50%) scale(1.02);
	box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.15);
}

.image-placeholder {
	width: 100%;
	height: 600rpx;
	background-color: #f5f5f5;
	border-radius: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-placeholder::after {
	content: '加载中...';
	color: #999;
	font-size: 28rpx;
}

.wallwall-btn {
	background-color: #fff4e0 !important;
	color: #fec009 !important;
}

.wall-video {
	height: 100%;
	width: 100%;
}

.wall-video-cover {
	border-radius: 60rpx;
	overflow: hidden;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.detail-btn {
	width: 44% !important;
	margin: 0rpx auto 30rpx auto;
}

/* .自定义状态栏 */
.nav-view {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.nav-icon {
	height: 70rpx;
	width: 70rpx;
	margin-left: 30rpx;
}

/* 全局 */
page,
.centem-body {
	width: 100%;
	height: 100%;
}

button:after {
	border: 0px solid rgba(0, 0, 0, .2);
}

/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {
	.privacy-view {
		background: #161616;
	}

	.privac-text {
		background: #202020;
	}

	.wall-popup {
		background: #292929;
	}
}
</style>